<template>
  <div class="data-log-table">
    <el-table :data="dataLogs" empty-text="无生产数据" border stripe height="100%">
      <el-table-column label="设备" prop="deviceName" align="center" width="170px" show-overflow-tooltip />
      <!--
      <el-table-column label="生产模式" prop="pstate" align="center" show-overflow-tooltip>
        <template #default="scope">
          <template v-if="scope.row.pstate === 0">待机</template>
          <template v-else-if="scope.row.pstate === 1">手动</template>
          <template v-else-if="scope.row.pstate === 2">半自动</template>
          <template v-else-if="scope.row.pstate === 3">全自动</template>
        </template>
      </el-table-column>
      -->
      <el-table-column label="模穴数" prop="deviceHoleCount" align="center" />
      <el-table-column label="成型周期时长" align="center" :formatter="l => `${l.devtime}秒`" />
      <el-table-column label="生产周期时长" align="center" :formatter="l => `${l.prdtime}秒`" />
      <el-table-column label="开模时长" align="center" :formatter="l => `${l.opntime}秒`" />
      <el-table-column label="合模时长" align="center" :formatter="l => `${l.clstime}秒`" />
      <el-table-column label="注射时长" align="center" :formatter="l => `${l.injtime}秒`" />
      <el-table-column label="熔胶时长" align="center" :formatter="l => `${l.meltime}秒`" />
      <el-table-column label="冷却时长" align="center" :formatter="l => `${l.cootime}秒`" />
      <el-table-column label="取件时长" align="center" :formatter="l => `${l.gettime}秒`" />
      <el-table-column label="告警" align="center" :formatter="l => l.alarm === 1 ? '是' : '无'" />
      <el-table-column label="时间" prop="createTime" align="center" width="170px" show-overflow-tooltip />
    </el-table>
  </div>
</template>

<script>
import httpRequest from '@/utils/request'
import vueStateMixin from "@/utils/vue-state-mixin";

export default {
  name: 'DataLogTable',
  mixins: [vueStateMixin],
  props: {
    deviceId: {
      type: Number,
      required: false
    }
  },
  data() {
    return {
      dataLogs: null
    }
  },
  watch: {
    deviceId: {
      immediate: true,
      handler() {
        this.loadDataLog()
      }
    }
  },
  created() {
    setInterval(() => {
      if(this.pageActivate) {
        this.loadDataLog()
      }
    }, 5000)
  },
  methods: {
    loadDataLog() {
      httpRequest({
        url: '/api/datalog/loadDataLog',
        params: {
          deviceId: this.deviceId
        }
      }).then(resp => {
        if (resp.success) {
          this.dataLogs = resp.data.content
        } else {
          this.$message.error(resp.message)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.data-log-table {
  height: 100%;
  --border-color: rgba(255, 255, 255, 0.3);

  .el-table {
    background-color: transparent !important;
    border-color: var(--border-color) !important;

    tr, th, td {
      background-color: transparent !important;
      border-color: var(--border-color) !important;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
